Lining up navigation menu

[TheServant]

Hi guys,
While starting my layout from scratch, I have come up against something that is taking me a long time to figure out and I can't find exactly what I want on google. Here is the html layout:

    <div id="top_menu">
        <div id="nav">
            <ul>
                <li><a href="#">Home</a>
                    <ul>
                        <li><a href="#"><span>Home</span></a></li>
                        <li><a href="#"><span>Forums</span></a></li>
                    </ul>
                </li>
...
            </ul>
        </div>
    </div>

Here is my CSS:

    #top_menu {
        height: 60px;
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        background: gray url(top_menu_bg.png) repeat-x;
        display: block;
        text-align: center;
        border: 2px gray ridge;
        border-left: none;
        border-right: none;
        font-size: 16px;
    }
        #nav {
            width: 100%;
        }
        #nav ul {
            width: 800px;
            margin: 0 auto;
            display: block;
        }
        #nav ul ul {
            font-size: 14px;
            margin-top: 10px;
        }
        #nav ul ul li {
            display: none;
            height: 20px;
            float: left;
            width: 100px;
            padding-top: 5px;
        }
        #nav ul li {
            height: 30px;
            width: 150px;
            padding-top: 5px;
            float: left;
            list-style: none;
        }
        #nav ul li:hover ul li {
            display: block;
        }
 

Quite simple, the list is horizontal and once the top list is hovered upon, the bottom list is displayed (which changes for each top list item selected). I am trying to line the bottom list to be under the top list to the left most. If I use position:absolute left:0 it will align to the left of the screen, not the div (800px in the center). I cannot use a negative margin because it will vary in magnitude, and I would prefer not giving id's to every item.
If that doesn't make sense, here is my site and if you just hover on the links you will see what I mean.

Thanks for your help.

[hsriat]

Try this:

HTML:

<div id="nav">
<div id="nav_wrapper">
    <ul id="rootul">
        <li>
            <!------>
        </li>
    </ul>
</div>

CSS:

#nav_wrapper {
    width: 800px;
    margin: 0 auto;
}
#nav ul {
    margin: 0;
    display: block;
    text-align: left;
    padding-left: 75px;
}
#nav ul ul {
    width: 1024px;
    font-size: 14px;
    margin-top: 10px;
    padding-left: 0px;
}
#nav ul ul li {
    display: none;
    height: 20px;
    float: left;
    width: 100px;
    padding-top: 5px;
}
#nav ul li {
    height: 30px;
    width: 145px;
    padding-top: 5px;
    float: left;
    list-style: none;
}
#nav ul li:hover ul li {
    display: block;
}

This won't look good if you have to give background colour to the menu items.

[David Laakso]

This [1] will give you a base to work from. Just use one drop-down-- eliminate the fly-out, drop down...
[1]http://sperling.com/examples/menuh/

[TheServant]

Thanks for your suggestions, I will try it out when I get home and keep at it. Unfortunately I will have to give backgrounds to the menu items eventually, so might have to teak hsriat's code. David, the problem with that base to work from is that it suffers from the same issue mine has (with the lists forming directly underneath their parents).

Is it possible to use css to change a property of an item, if that item is not a child?
As in can I have two divs (same level) and have something like:

#div1 {
display: block;
}
#div2 {
display: none;
}
#div1:hover #div2{
display: block;
}

With the html:

<div id="div1">
<p>Div 1 Content</p>
</div>
<div id="div2">
<p>Div 2 Content</p>
</div>

I know it can be done with javascript, but is there a way to do it in only CSS?

[hsriat]

@TheServant
Just try to use a combination of negative margin and positive padding (same value) for ul ul li.

[David Laakso]

Maybe this will work for you [1]? As for myself I could care less whose code you use. Name of the game is resolve a problem. Easiest way to do that is to keep it simple. Sometimes that means changing the game plan-- hence the simple solution sent earlier...
[1] http://www.tjkdesign.com/articles/ne...wn/default.asp

[TheServant]

Awesome link David, that's what I was after, will be going through that as soon as I have time. Thanks heaps. So is that a no on my previous qeustion?

[David Laakso]

Good luck. It ain't gonna be easy to pull that off even with TJK's code.

Aside: I don't know what previous question you are referring to and since I am of simple mind and have a little difficulty understanding all your questions, I will defer to someone else to answer them...

[TheServant]

I agree, after looking through TJK's code its still going to require a bit of work, but I am sure there's a workable solution. I apologise for not being clear, but to re-state my question:

@TheServant

[David Laakso]

CSS copes with appearance (the way things look) rather than the way they behave. You'll need scripting to create the behavior you seek...

[TheServant]

Thanks for your help again.